<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>DivTranslate</title>
		<meta name="description" content="Translate your texts to your language with the Apertium translation engine">
		<meta name="viewport" content="width=device-width">

		<link rel="stylesheet" href="css/main.css" type="text/css">
		<link rel="stylesheet" href="building-blocks/style/headers.css" type="text/css">
		<link rel="stylesheet" href="building-blocks/style_unstable/drawer.css" type="text/css">
		<link rel="stylesheet" href="building-blocks/style/input_areas.css" type="text/css">
		<link rel="stylesheet" href="building-blocks/style/buttons.css" type="text/css">
		<link rel="stylesheet" href="building-blocks/style_unstable/progress_activity.css" type="text/css">
		 <style>
			html, body {
			  margin: 0;
			  padding: 0;
			  font-size: 10px;
			  background-color: #fff;
			  height: 100%;
			  overflow-x: hidden;
			}

			h2.bb-docs {
			  font-size: 1.8rem;
			  font-weight: lighter;
			  color: #666;
			  margin: -0.1rem 0 0;
			  background-color: #f5f5f5;
			  padding: 0.4rem 0.4rem 0.4rem 3rem;
			  border: solid 0.1rem #e8e8e8;
			}

			section[role="region"] {
			  height: 100%;
			  line-height: 1em;
			  font-size: 2.2rem;
			}

			div[role="main"] {
			  background: #fff;
			  height: calc(100% - 5rem);
			  overflow: hidden;
			}

			div[role="main"] p {
			  margin: 2rem 2.5rem;
			}
			#about{
				text-align: center;
			}
			#spinner-div
			{
				text-align: center;
			}
		</style>
	</head>
	<body role="application">
		<section data-type="sidebar">
		  <header>
			<menu type="toolbar">
			  <!-- <a href="#content"><span class="icon icon-add">add</span></a> -->
			</menu>
			<h1>DivTranslate</h1>
		  </header>
		  <nav>
			<ul>
			  <li><a href="#content" id="en2es">English to Spanish</a></li> <!-- JavaScript to modify the variables of language -->
			  <li><a href="#content" id="es2en">Spanish to English</a></li>
			  <li><a href="#content" id="fr2es">French to Spanish</a></li>
			  <li><a href="#content" id="es2fr">Spanish to French</a></li>
			</ul>
			<h2>Help</h2>
			<ul>
			  <li><a href="http://marketplace.firefox.com/app/divtranslate" target="_blank">Marketplace site</a></li>
			  <li><a href="http://code.google.com/p/divtranslate-fxos" target="_blank">Source code</a></li>
			  <li><a href="http://apertium.org" target="_blank">Apertium.org</a></li>
			  <li><a href="#about">About</a></li>
			</ul>
		  </nav>
		</section>
		<section id="drawer" role="region">
		  <header>
			<a href="#content"><span class="icon icon-menu">hide sidebar</span></a>
			<a href="#drawer"><span class="icon icon-menu">show sidebar</span></a>
			<h1 id="actual-lang">English to Spanish</h1> <!-- Change it on JavaScript -->
		  </header>
		  <div role="main" id="content">
			<textarea placeholder="Something to translate" id="text"></textarea>
			<a id="translate-button" class="recommend" role="button">Translate</a>
			<div id="spinner-div">
				<progress id="spinner"></progress>
			</div>
			<section id="about">
				<small>(C) Adrián Arroyo Calle 2013-2015</small>
			</section>	
		</div>
		</section>
		<script type="text/javascript" src="js/apertium.js?key=vYIOAwdAIx2Kl1omAehMpKYpBus"></script>
		<script src="js/require.js" data-main="js/app"></script>
	</body>
</html>
